<template>
	<view class="auditList-container">
		<view class="top-box">
			<view class="input-box">
				<input 
				placeholder="输入姓名/手机号进行查找" 
				v-model="keywords" 
				placeholder-class="placeholder" 
				@confirm="freshList"
				@blur="freshList"
				/>
				<uni-icons type="search" size="24" color="#fff" @tap="freshList"></uni-icons>
			</view>
			
			<view class="tab-box">
				<view class="tab-item" v-for="item in tabList" :key="item.tabName" 
					:class="{active:currentTag==item.tag}"
					@tap="tabChange(item.tag)"
				>
					{{item.tabName}}
				</view>
			</view>
		</view>
		
		<view class="audit-list">
			<view class="list-item" v-for="item in auditList" :key="item.r_id" @tap="jumpPage(item.r_id)">
				<view class="basic-info-box">
					<view class="head-portrait">
						<image :src="item.avatar" v-if="item.avatar"></image>
						<image v-else src="https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132"></image>
					</view>
					<view class="info">
						<view class="name">{{item.username}}</view>
						<view class="contact">
							{{item.mobile}}<text v-if="item.province||item.city">（{{item.province}}{{item.city}}）</text>
						</view>
						<view class="spacetime">{{item.createtime}}</view>
					</view>
					<view class="grade" :style="{color:item.audit_score>=60?'#26BCFD':'#D54941',marginTop:currentTag==0?'0':'-30rpx',}">{{item.audit_score?item.audit_score+'分':'-'}}</view>
					<view class="auditor" v-if="currentTag!==0">{{item.audittime}} {{item.nickname}}审核</view>
				</view>

				<view class="record-box" v-if="currentTag!==0 && item.followingRecord.length>0">
					<text class="jilu-name">记录：</text>
					<view class="jilu-data">
						<view v-for="val in item.followingRecord" :key="val.id">{{val.recordtime}} {{val.note}}</view>
					</view>
				</view>
				
			</view>
		</view>
		<view class="empty-box" v-if="showEmpty">
			<image src="https://static.mo-yu.vip/wechat/images/orderEmpty.png"></image>
		</view>
		<uni-load-more v-if="showLoadStatus" :status="status" :size="10" :content-text="contentText" />
	</view>
</template>

<script>
	// 防抖函数
	function debounce(fn, wait) {
	    let timeout = null;
	    return function() {
	        let context = this;
	        let args = arguments;
	        if (timeout) clearTimeout(timeout);
	        let callNow = !timeout;
	        timeout = setTimeout(() => {
	            timeout = null;
	        }, wait);
	        if (callNow) fn.apply(context, args);
	    };
	}
	export default{
		data(){
			return{
				keywords:"",
				tabList:[
					{tabName:'待审核',tag:0},
					{tabName:'审核通过',tag:1},
					{tabName:'审核不通过',tag:2}
				],
				currentTag:0,  // 默认待审核
				auditList:[],
				
				page: 1,
				size:10,
				showEmpty:true,
				showLoadStatus: true,
				status:'loading',
				more:true,
				contentText: {
					contentdown: '上拉加载更多~',
					contentrefresh: '加载中...',
					contentnomore: '已经到底了~~'
				},
			}
		},
		onShow() {
			this.freshList()
		},
		
		// 触底刷新
		onReachBottom() {
			if (this.more) {
				this.getList()
			}
		},
		
		// 下拉刷新
		onPullDownRefresh: function() {
			this.freshList();
			this.$tools.loadIng()
			setTimeout(() => {
				uni.stopPullDownRefresh()
			}, 500)
		},
		
		methods:{
			// 刷新列表
			freshList:debounce(function(){
				this.page = 1
				this.more = true
				this.status = 'loading'
				this.auditList = []
				this.getList();
			},600),
			
			// 获取审核列表
			getList(){
				let self=this
				this.$request.post(this.$api.auditList, {
					sort:1,
					sort_type:'desc',
					keywords:this.keywords,
					status:this.currentTag,
					page:this.page++,
					num:this.size
				}, {
					token: true
				}).then(res => {
					if (res.code == 1) {
						let {
							data = {}
						} = res;
						console.log(data,"审核列表")
						let newArray = data
						for (let i in newArray) {
							if(newArray[i].audittime){
								newArray[i].audittime =this.$tools.formatDate(newArray[i].audittime)
							}
							newArray[i].createtime =this.$tools.fDate(this.$tools.formatDate(newArray[i].createtime))
							for (let j=0;j<newArray[i].followingRecord.length;j++){
								newArray[i].followingRecord[j].recordtime=this.$tools.formatDate(newArray[i].followingRecord[j].recordtime)
							}
						}
						
						
						if (newArray.length == 0 && self.page ==2) {
							self.showEmpty = true
							self.showLoadStatus = false
							self.more = false // 不能再次请求了
							return false;
						} else {
							self.showLoadStatus = true
							self.more = true
							self.showEmpty = false
							self.status = 'loading'
						}
						if (newArray.length < this.size) { // 说明没有更多数据
							self.status = 'noMore'
							self.more = false
							self.showEmpty = false
						}
						
						self.auditList=self.auditList.concat(newArray)
					}else{
						self.showEmpty=false
						self.more = false
						self.status = 'noMore'
					}
				}).finally(() => {
					setTimeout(()=>{
						this.$tools.hideLoading()
					}, 1000)
				})
			},
			
			tabChange(tag){
				this.currentTag=tag
				this.freshList()
			},
			
			jumpPage(id){
				if(this.currentTag==0){
					uni.navigateTo({
						url:'/pages/join/toAudit?id='+id
					})
				}else{
					uni.navigateTo({
						url:'/pages/join/addRecord?id='+id
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.auditList-container{
		padding-bottom: 50rpx;
		.top-box{
			position: sticky;
			top: 0;
			z-index: 999;
			background: #020234;
			padding: 20rpx;
			.input-box{
				display: flex;
				align-items: center;
				width: 710rpx;
				height: 68rpx;
				background: #03032E;
				border-radius: 170rpx;
				border: 2rpx solid rgba(255,255,255,0.5);
				padding: 12rpx 40rpx;
				box-sizing: border-box;
				input{
					width: 100%;
					color:#fff;
					font-size: 28rpx;
				}
				/deep/.placeholder{
					font-weight: 500;
					font-size: 28rpx;
					color: rgba(255,255,255,0.5);
				}
			}
			
			.tab-box{
				margin-top: 28rpx;
				padding: 0 40rpx 0 58rpx;
				display: flex;
				justify-content: space-between;
				.tab-item{
					font-family: PingFang SC, PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: rgba(255,255,255,0.5);
					line-height: 38rpx;
					&:nth-child(2){
						margin-left: 44rpx;
					}
				}
				.active{
					color: #FFFFFF;
					&::after{
						content: "";
						display: block;
						width: 100%;
						height: 4rpx;
						background: #26BCFD;
						margin-top: 8rpx;
					}
				}
			}
		}
			
		.audit-list{
			padding: 0 20rpx;
			.list-item{
				width: 710rpx;
				background: #1D1C5C;
				border-radius: 16rpx;
				margin-bottom: 20rpx;
				box-sizing: border-box;
				overflow: hidden;
				.basic-info-box{
					padding: 24rpx 28rpx;
					display: flex;
					align-items: center;
					gap: 10rpx;
					position: relative;
					.head-portrait{
						flex-shrink: 0;
						width: 112rpx;
						height: 112rpx;
						border-radius: 50%;
						overflow: hidden;
						image{
							object-fit: cover;
						}
					}
					.info{
						// 解决display: inline-block的间距问题
						font-size: 0;
						flex:1;
						.name{
							font-weight: bold;
							font-size: 32rpx;
							color: #FFFFFF;
							line-height: 38rpx;
						}
						.contact{
							display: flex;
							margin-top: 8rpx;
							font-weight: 500;
							font-size: 28rpx;
							color: #FFFFFF;
							line-height: 36rpx;
							white-space: nowrap;
							text{
								width: 190rpx;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}

						.spacetime{
							margin-top: 8rpx;
							padding: 0 6rpx;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							border: 1rpx solid #26BCFD;
							font-weight: 500;
							font-size: 20rpx;
							color: #26BCFD;
							display: inline-block;
						}
					}
					.grade{
						white-space: nowrap;
						font-weight: bold;
						font-size: 56rpx;
						line-height: 80rpx;
					}
					.auditor{
						font-size: 24rpx;
						color: #4FBE29;
						line-height: 36rpx;
						position: absolute;
						right: 28rpx;
						bottom: 24rpx;
						
						
					}
				}
				
				.record-box{
					padding: 12rpx 28rpx;
					display: flex;
					font-size: 24rpx;
					color: rgba(255,255,255,0.5);
					background: #353484;
					line-height: 36rpx;
					.jilu-name{
						flex-shrink: 0;
					}
					.jilu-data{
						>view:not(:last-child){
							margin-bottom: 8rpx;
						}
					}
					
				}
			}
		}
	}
</style>